<template>
    <div class="container">
        <my-search :fields="fieldsList" :baseNumber="4" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false"/>
        <!-- <div class="btn">
            <el-button type="info" plain size="mini" icon="el-icon-delete-solid" @click="deleteList()">删除</el-button>
            <el-button type="info" plain size="mini" @click="upload()">
                <svg-icon icon-class="upload" />
                名册导入</el-button>
            <el-button type="info" plain size="mini" @click="download()">
                <svg-icon icon-class="download" />
                模板下载</el-button>
        </div> -->
        <div class="table-list">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" 
            row-key="id" :showsummary="false" 
            :columns="tableColumns" :tableData="tableDatas" 
            :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" 
            :totalPage="total" :height="$store.state.app.windowHeight - 200" 
            max-height="660px" :current="false" @onCurrentChange="changepageNo" 
            @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="true" @onSelect="onSelectionChange" @onSelectAll="handleselectAll" />
        </div>
        <!-- 上传组件隐藏 -->
        <el-upload style="display:none;" ref="uploadTemplate" class="upload-demo" :before-upload="beforeUpload" action drag :show-file-list="false" :http-request="httpRequest" :multiple="false" accept=".xls,.csv,.xlsx">
            <el-button size="small" type="primary" ref="uploadTemplate_btn">点击上传</el-button>
        </el-upload>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { queryDetailList, batchDelete, downloadTemplate, uploadTemplate } from '@/api/cxtj/jtxxk'
import { queryDetailList, batchDelete, downloadTemplate, uploadTemplate } from '@/api/cxtj/zdsygl'
import { downloadFile } from "@/utils/utils"
export default {
    name: 'jtxxk-list',


    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '集团名称:',
                    field: 'nsrmc',
                    type: 'text',
                    value: ''
                },
                {
                    label: '集团类型:',
                    field: 'qylx_mc',
                    type: 'select',
                    value: '',
                    multiple: false,
                   options: [
                        {
                            value: '11',
                            label: '千户集团'
                        },
                        {
                            value: '2',
                            label: '省局列名'
                        },
                        {
                            value: '3',
                            label: '市局列名'
                        },
                    ]
                }

            ],
            tableColumns: [
                {
                    label: '集团名称',
                    prop: 'NSRMC',
                    align: 'center',
                    minWidth: 200
                },
                {
                    label: '集团类型',
                    prop: 'QYLX_MC',
                    align: 'center',
                    minWidth: 80
                },
                // {
                //     label: '所属集团',
                //     prop: 'SSJT_MC',
                //     align: 'center',
                //      width: 200
                // },
                // {
                //     label: '上级公司',
                //     prop: 'SJ_NSRMC',
                //     align: 'center',
                //      width: 200
                // },
                // {
                //     label: '成立日期',
                //     prop: 'DJRQ',
                //     align: 'center',
                //      minWidth: 120
                // },
                // {
                //     label: '注册资本',
                //     prop: 'ZCZB',
                //     align: 'center',
                //      minWidth: 100
                // },
                // {
                //     label: '法定代表人',
                //     prop: 'FDDBRXM',
                //     align: 'center',
                //      minWidth: 120
                // },
                // {
                //     label: '联系人',
                //     prop: 'FDDBRXM',
                //     align: 'center',
                //     minWidth: 120
                // },
                // {
                //     label: '登记注册类型',
                //     prop: 'DJZCLXMC',
                //     align: 'center',
                //      minWidth: 120
                // },
                // {
                //     label: '所属行业',
                //     prop: 'HYML_MC',
                //     align: 'center',
                //     minWidth: 80
                // },
                // 、上级公司 、成立日期、注册资本、法定代表人、联系人、登记注册类型、所属行业
                // {
                //     label: '是否上市公司',
                //     prop: 'sfssgs',
                //     align: 'center',
                //     width: 120,
                //     render: (h, params) => {
                //         if (params.row.sfssgs == 'Y') {
                //             return <span>是</span>
                //         } else {
                //             return <span>否</span>
                //         }
                //     }
                // },

                // {
                //     label: '标签',
                //     prop: 'bq',
                //     align: 'center',
                //     width: 250,
                //     render: (h, params) => {
                //         let regex = /\|/g;
                //         return <span>{(params.row.bq).replace(regex, " ")}</span>;
                //     }
                // },
                {
                    label: '操作',
                    prop: 'caozuo',
                    align: 'center',
                    width: 200,

                    render: (h, params) => {
                        return (
                            <span>
                                <el-button type="text" onClick={() => this.go('detail', params.row)}>详细信息</el-button>
                                <el-button type="text" onClick={() => this.go('jtxxk', params.row)}>编辑</el-button>
                            </span>
                        );
                    }
                }




            ],

            tableDatas: []
            , queryObj: {
                nsrmc: '', //公司名称
                qylx_mc: '',
                pageNo: 1,
                pageSize: 20
            },
            total: 0,
            selectedRows: []
        }
    },
    computed: {
        ...mapGetters([
            'name'
        ])
    },
    mounted() {
        this.getTableData();
    },
    methods: {

        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.nsrmc = params.nsrmc
            this.queryObj.qylx_mc = params.qylx_mc
            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.getTableData();
        },
        getTableData() {
            this.loading = true
            let params = {
                nsrmc: this.queryObj.nsrmc,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
                qylx_mc: this.queryObj.qylx_mc,
                sfzb:'Y'
            }
            queryDetailList(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                }
            })
        },
        deleteList() {
            if (this.selectedRows.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let nsrsbhArr = []
                    this.selectedRows.forEach(item => {
                        nsrsbhArr.push(item.nsrsbh)
                    })
                    batchDelete(nsrsbhArr.join(',')).then(result => {
                        console.log(result)
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }


        },
        //下载模板
        download() {
            downloadTemplate().then(res => {
                downloadFile(res)
            })
        },

        //s上传名册
        upload() {
            this.$refs['uploadTemplate'].$refs['upload-inner'].handleClick()
        },
        beforeUpload(file, fileList) {
            // console.log('文件状态改变前',file);
            // if(!file.name.includes('.pdf')) {
            //     this.$message.error('请上传pdf格式文件')
            //     return false
            // }

            if (file.size > 1024 * 1024 * 10) {
                this.$message.warning(
                    "你上传的 \“" + file.name + "\” 文件过大，请上传小于2M的文件。"
                );
                return false;
            }

            if (
                file.name.indexOf("@") != -1 ||
                file.name.indexOf("#") != -1 ||
                file.name.indexOf('""') != -1 ||
                file.name.indexOf("<") != -1 ||
                file.name.indexOf(">") != -1 ||
                file.name.indexOf("?") != -1 ||
                file.name.indexOf("|") != -1 ||
                file.name.indexOf("/") != -1 ||
                file.name.indexOf(":") != -1 ||
                file.name.indexOf("`\`") != -1
            ) {
                this.$message.warning(
                    "你上传的 \“" +
                    file.name +
                    "\” 文件有特殊字符，文件名中不可存在特殊字符,请重新上传"
                );
                return false;
            }

            let index = file.name.lastIndexOf(".");
            let Type = file.name.substr(index + 1, file.name.length);
            if (["xls", "csv", "xlsx"].indexOf(Type.toLowerCase()) === -1) {
                this.$message({
                    type: "warning",
                    message: "请上传后缀名为xls,csv,xlsx的附件！",
                });
                return false;
            }
        },
        httpRequest(data) {
            console.log(data);
            let fd = new FormData();
            fd.append("file", data.file);
            uploadTemplate(fd).then((res) => {
                if (res.code == 200) {

                    this.$message({
                        type: "success",
                        message: res.message,
                    });
                    this.getTableData()

                }
            });
        },

        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        handleselectAll(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        go(name, params) {
            this.$emit('changePage', name, params);
            // this.changePage(name, params)
            // this.$router.push({
            //     name: name,
            //     params: { id: params.id }

            // })
        },

    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;

    // padding: 8px;
    .btn {
        padding: 8px 8px 8px 0;
    }
}
::v-deep .el-date-editor {
    width: 220px;
}
</style>
